<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript">
	$(function() {
		var url = 'courseDetailAction!getCharts.action';
		var id = 'financeMgt_courseCharts';
		setcourseCharts(url);
	});
	function setcourseCharts(url) {
		var Chart = echarts.init(document.getElementById("financeMgt_courseCharts"));
		Chart.showLoading({
			text : 'Loding...'
		});

		var categories = [];
		var values = [];
		$.ajax({
			url : url,
			dataType : "json",
			type : 'post',
			success : function(json) {
				 var 
				 option = {
						    tooltip: {
						        trigger: 'axis',
						        axisPointer: {
						            type: 'cross',
						            crossStyle: {
						                color: '#999'
						            }
						        }
						    },
						    toolbox: {
						        feature: {
						            dataView: {show: true, readOnly: false},
						            magicType: {show: true, type: ['line', 'bar']},
						            restore: {show: true},
						            saveAsImage: {show: true}
						        }
						    },
						    legend: {
						        data:['团课数量','私教课数量','参课人数']
						    },
						    xAxis: [
						        {
						            type: 'category',
						            data: json.x,
						            axisPointer: {
						                type: 'shadow'
						            }
						        }
						    ],
						    yAxis: [
						        {
						            type: 'value',
						            name: '课程数量',
						            min: 0,
						            max: 10,
						            //interval: 1,
						            axisLabel: {
						                formatter: '{value} 课'
						            }
						        },
						        {
						            type: 'value',
						            name: '参课人数',
						            min: 0,
						            max: 50,
						            //interval: 1,
						            axisLabel: {
						                formatter: '{value} 人'
						            }
						        }
						    ],
						    series: [
						        {
						            name:'团课数量',
						            type:'bar',
						            data:json.detail
						        },
						        {
						            name:'私教课数量',
						            type:'bar',
						            data:json.detail2
						        },
						        {
						            name:'参课人数',
						            type:'line',
						            yAxisIndex: 1,
						            data:json.detail3
						        }
						    ]
						};
				 Chart.hideLoading();
		            Chart.setOption(option);  
		            
			}
		});
	};
</script>
<div id="financeMgt_courseCharts" style="width:100%; height: 100%;"></div>
